<script setup lang="ts">
import type { Job } from '@/apis/model/job.ts'
import { getApplicationsApi } from '@/apis/modules/application.ts'
import {
  getComputeJobDetailApi,
  postComputeJobRetryApi,
} from '@/apis/modules/job.ts'
import { formatDate, formatEmptyValue } from '@/utils/format.ts'
import { getOptionLabel } from '@/utils/options.ts'
import { Message } from '@arco-design/web-vue'
import TaskCard from '../components/TaskCard.vue'
import useResourceList from './useResourceList.ts'

const route = useRoute()
const { allRegionOptions } = useRegions()

const taskId = route.params.id as string
const taskInfo = ref<Job>({})
const appList = ref<LabelValue[]>([])

const resourceList = useResourceList(taskInfo)

async function getTaskInfo() {
  taskInfo.value = await getComputeJobDetailApi({ order_id: taskId })
}

const num = computed(
  () => resourceList.value?.length / Number(taskInfo.value?.status?.length),
)

const running = computed(() => {
  return resourceList.value.some(item => item.status === 3)
})

async function getApplications() {
  const res = await getApplicationsApi({ limit: 500 })
  appList.value = (res.list || []).map((item) => {
    return {
      label: item.name!,
      value: item.app_id!,
    }
  })
}

function handleRetry() {
  ModalHelper.confirm({
    title: '重试执行',
    content: '确定重试执行该任务吗？',
    async onOk() {
      await postComputeJobRetryApi({
        id: taskInfo.value.job_info?.id,
        order_id: taskInfo.value.job_info?.order_id,
        app_id: taskInfo.value.job_info?.app_id,
      })
      await getTaskInfo()
      Message.success('操作成功')
    },
  })
}

onMounted(() => {
  getApplications()
  getTaskInfo()
})
</script>

<template>
  <main-container :show-pagination="false">
    <task-card title="创建资源">
      <div class="descriptions">
        <div class="descriptions-item">
          <div class="descriptions-item__label">
            订单 ID
          </div>
          <div class="descriptions-item__value">
            <copy-field>
              {{ formatEmptyValue(taskInfo?.job_info?.order_id) }}
            </copy-field>
          </div>
        </div>
        <div class="descriptions-item">
          <div class="descriptions-item__label">
            所属应用
          </div>
          <div class="descriptions-item__value">
            {{ getOptionLabel(taskInfo?.job_info?.app_id, appList) }}
          </div>
        </div>
        <div class="descriptions-item">
          <div class="descriptions-item__label">
            区域
          </div>
          <div class="descriptions-item__value">
            {{
              getOptionLabel(taskInfo?.job_info?.region_id, allRegionOptions)
            }}
          </div>
        </div>
        <div class="descriptions-item">
          <div class="descriptions-item__label">
            开始时间
          </div>
          <div class="descriptions-item__value">
            {{ formatDate(taskInfo?.job_info?.created_at) }}
          </div>
        </div>
        <div class="descriptions-item">
          <div class="descriptions-item__label">
            结束时间
          </div>
          <div class="descriptions-item__value">
            {{ running ? '-' : formatDate(taskInfo?.job_info?.updated_at) }}
          </div>
        </div>
      </div>
    </task-card>

    <task-card
      title="资源清单"
      class="mt-6"
    >
      <div>
        <div>
          <div class="flex text-color-3">
            <div class="w-[200px] shrink-0">
              产品
            </div>
            <div class="w-[200px] shrink-0">
              配置
            </div>
            <div class="flex-1 shrink-0" />
          </div>
        </div>
        <div>
          <div
            v-for="(item, index) in resourceList"
            :key="index"
            class="my-4 flex items-start"
            :class="{
              'border-b pb-2 border-dashed border-color-2':
                (index + 1) % num === 0 && index < resourceList?.length - 1,
            }"
          >
            <div class="w-[200px] shrink-0">
              {{ item.name }}
            </div>

            <div class="w-[200px] shrink-0">
              <template v-if="!Array.isArray(item.value)">
                {{ item.value }}
              </template>
              <template v-else>
                <template
                  v-for="(item2, index2) in item.value"
                  :key="index2"
                >
                  <div v-if="typeof item2 === 'string'">
                    {{ item2 }}
                  </div>
                  <div
                    v-else
                    class="flex items-center leading-5"
                  >
                    <div class="mr-2 text-color-3">
                      {{ item2.label }}
                    </div>
                    <div>{{ item2.value }}</div>
                  </div>
                </template>
              </template>
            </div>

            <div class="flex flex-1 shrink-0 leading-5">
              <div class="mr-2">
                <i-icons-success-circle
                  v-if="item.status === 1"
                  class="text-success"
                />
                <i-icons-failed-circle
                  v-else-if="item.status === 2"
                  class="text-danger"
                />
                <i-icons-loading
                  v-else-if="item.status === 3"
                  class="animate-spin"
                />
                <span v-else>-</span>
              </div>
              <div
                v-if="item.status === 2"
                class="text-danger"
              >
                {{ item.reason }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </task-card>
    <!-- <div
      v-if="taskInfo.job_info?.status === E_JOB_STATUS.FAILED"
      class="mt-6"
    >
      <a-button
        type="primary"
        @click="handleRetry"
      >
        重试
      </a-button>
    </div> -->
  </main-container>
</template>

<style scoped lang="less">
.descriptions {
  @apply grid grid-cols-5 gap-x-6;
  &-item {
    @apply flex flex-col gap-y-1 text-xs;
    &__label {
      @apply text-[#86909c];
    }
  }
}
</style>
